// 样式重置
html {
  height: 100%;
  body {
    height: 100%;
    padding: 0;
    margin: 0;
    color: var(--font-color);
    font-size: var(--font-size);
    font-family: var(--font-family);
  }
  h1,h2,h3,h4,h5,h6,ul {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  #app {
    height: 100%;
    min-width: var(--page-min-width);
  }
}

// 穿梭框的按钮
.el-transfer__buttons {
  padding: 0 16px !important;
}

// dialog
.eva-dialog {
  .el-form-item {
    display: flex !important;
    .el-form-item__content {
      flex-grow: 1;
    }
  }
}

// 删除按钮
.el-button--delete {
  background: transparent !important;
  border: 0 !important;
  color: var(--color-danger) !important;
  &:hover {
    color: var(--color-danger-hover) !important;
  }
}

// 删除窗口
.delete-message-box {
  .el-message-box__message p {
    word-break: break-all !important;
  }
}

// 按钮图标
.el-button.iconfont {
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  margin-right: 5px;
  font-size: 14px;

  span {
    padding-left: 6px;
  }
}

// 主要文字
.text-primary {
  color: var(--color-primary);
}

// 危险文字
.text-danger {
  color: var(--color-danger);
}

// 修改表格树的前方占位宽度，原值为20px会导致树节点未对齐
.el-table__placeholder {
  width: 12px;
}

// 明亮模式
.light {
  // 去掉表单自动填充的背景色
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: black;
  }
  // el-alert，暗黑模式交给element plus处理
  .el-alert--info {
    background: var(--el-color-primary-light-9) !important;
    border: 1px solid var(--el-color-primary-light-7) !important;
    // 明亮和暗黑模式下字体颜色均为黑色
    color: #555 !important;
  }
}

// 暗黑模式
.dark {
  // 去掉表单自动填充的背景色
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: white;
  }
  // el-tag primary太亮，保持和表头一样的背景色，使其和表头有呼应
  .el-tag--primary {
    background-color: var(--table-header-background-color);
    border-color: var(--table-header-background-color);
  }
}
